<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>鲜果集 | 高端水果定制专家</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"/>
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
	<style>
		:root {
            --primary: #ff6b6b;
            --secondary: #f8e7e7;
            --gradient: linear-gradient(135deg, #ff9a9a, #ff6b6b);
        }
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: url('https://images.unsplash.com/photo-1542323133-983d1d608245?q=80&w=1920') no-repeat center center fixed;
            background-size: cover;
            color: #fff;
        }
        .hero {
            background: rgba(0,0,0,0.6);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            margin: 5vh 5%;
            padding: 30px;
        }
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: rgba(255,255,255,0.9);
            border-radius: 15px;
            overflow: hidden;
            height: 100%;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }
        .carousel-item img {
            object-fit: cover;
            height: 50vh;
        }
        .btn-primary {
            background: var(--gradient);
            border: none;
        }
        .text-primary {
            color: var(--primary) !important;
        }
        .navbar-expand-lg .navbar-nav .nav-link {
            color: #fff;
            margin: 0 10px;
            font-weight: 500;
        }
        #shopping-cart-section, #member-center-section {
            scroll-margin-top: 100px;
        }
        .cart-item {
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .cart-item-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
        }
        .cart-empty {
            text-align: center;
            padding: 40px 0;
        }
	</style>

</head>

<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg shadow-lg mb-5">
	<div class="container">
		<a class="navbar-brand text-white fs-3" href="#"><i class="bi bi-leaf"></i>
			鲜果集</a>

		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
			<span class="text-white"><i class="bi bi-list"></i>
</span>

		</button>

		<div class="collapse navbar-collapse" id="navMenu">
			<ul class="navbar-nav me-auto">
				<li class="nav-item"><a class="nav-link active" href="#">首页</a>
				</li>

				<li class="nav-item"><a class="nav-link" href="#">水果礼盒</a>
				</li>

				<li class="nav-item"><a class="nav-link" href="#">季节限定</a>
				</li>

				<li class="nav-item"><a class="nav-link" href="#">企业采购</a>
				</li>

			</ul>

			<div class="d-flex gap-3">
				<a class="btn btn-light position-relative" href="#shopping-cart-section">
					<i class="bi bi-cart"></i>
					购物车
					<span id="cart-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none;">
            0
        </span>
				</a>

				<a class="btn btn-light" href="#member-center-section">
					<i class="bi bi-person"></i>
					会员中心
				</a>

				<!-- 修改后的报表按钮 - 使用完整URL -->
				<a class="btn btn-light"
				   href="http://localhost:63342/sun-xy/ruoyi-admin/templates/report.html?_ijt=qvf2n7leeralp595mvil8k4khj&_ij_reload=RELOAD_ON_SAVE"
				   target="_blank">
					<i class="bi bi-bar-chart-line"></i>
					销售报表
				</a>
			</div>

			</div>

		</div>

	</div>

</nav>


<!-- 主视觉区 -->
<div class="hero p-5">
	<div class="row g-5">
		<div class="col-lg-6">
			<h1 class="display-4 text-shadow-dark">全球严选鲜果 | 当日达</h1>

			<p class="lead fs-2">从果园到您家，全程冷链保鲜</p>

			<div class="d-grid gap-2">
				<button class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#freeShippingModal">新人专享礼包</button>

				<button class="btn btn-lg btn-outline-light" href="#"><i class="bi bi-chevron-down"></i>
					查看热销产品</button>

			</div>

		</div>

		<div class="col-lg-6 text-center">
			<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
				<div class="carousel-inner rounded">
					<div class="carousel-item active">
						<img src="https://img1.baidu.com/it/u=3126854253,2898018869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" class="d-block mx-auto" alt="草莓">
					</div>

					<div class="carousel-item">
						<img src="https://img2.baidu.com/it/u=2423509527,3153996959&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="芒果">
					</div>

					<div class="carousel-item">
						<img src="https://img0.baidu.com/it/u=2419203162,2980551875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=631" class="d-block mx-auto" alt="葡萄">
					</div>

				</div>

				<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"><i class="bi bi-chevron-left"></i>
</span>

				</button>

				<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"><i class="bi bi-chevron-right"></i>
</span>

				</button>

			</div>

		</div>

	</div>

</div>


<!-- 产品展示区 -->
<section class="container my-5 py-5">
	<h2 class="text-center mb-5" style="
		color: black;
		font-weight: bold;
		font-size: 500%;
		text-shadow:
			0 0 4px rgba(255, 0, 0, 0.8),
			0 0 8px rgba(0, 255, 0, 0.6),
			0 0 12px rgba(0, 0, 255, 0.4),
			0 0 16px rgba(255, 255, 0, 0.2),
			0 0 20px rgba(255, 0, 255, 0.1);
		transition: all 0.3s ease;
	">精选鲜果</h2>

	<div class="row g-4">

		<!-- 商品1：草莓 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img0.baidu.com/it/u=2946882790,1630201214&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
						 class="rounded w-100 h-100 object-fit-cover" alt="草莓">
				</div>

				<div class="p-3">
					<h4 class="fs-4 text-primary">日本红颜草莓</h4>

					<p class="text-muted">¥168/盒 | 产地直采</p>

					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">限量发售</small>

						<button class="btn btn-sm btn-outline-light" onclick="addToCart('日本红颜草莓', 168, 'https://img0.baidu.com/it/u=2946882790,1630201214&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667')">加入购物车</button>

					</div>

				</div>

			</div>

		</div>


		<!-- 商品2：菠萝蜜 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img0.baidu.com/it/u=1967721834,2885058822&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
						 class="rounded w-100 h-100 object-fit-cover" alt="菠萝蜜">
				</div>

				<div class="p-3">
					<h4 class="fs-4 text-primary">泰国金枕菠萝蜜</h4>

					<p class="text-muted">¥98/盒 | 热带直供</p>

					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">新鲜到货</small>

						<button class="btn btn-sm btn-outline-light" onclick="addToCart('泰国金枕菠萝蜜', 98, 'https://img0.baidu.com/it/u=1967721834,2885058822&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500')">加入购物车</button>

					</div>

				</div>

			</div>

		</div>


		<!-- 商品3：蓝莓 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img2.baidu.com/it/u=646453920,3527234017&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=543"
						 class="rounded w-100 h-100 object-fit-cover" alt="蓝莓">
				</div>

				<div class="p-3">
					<h4 class="fs-4 text-primary">智利进口蓝莓</h4>

					<p class="text-muted">¥128/盒 | 大果粒装</p>

					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">抗氧化佳品</small>

						<button class="btn btn-sm btn-outline-light" onclick="addToCart('智利进口蓝莓', 128, 'https://img2.baidu.com/it/u=646453920,3527234017&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=543')">加入购物车</button>

					</div>

				</div>

			</div>

		</div>


		<!-- 商品4：苹果 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img2.baidu.com/it/u=790355989,2287549195&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069"
						 class="rounded w-100 h-100 object-fit-cover" alt="苹果">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">新疆冰糖心苹果</h4>
					<p class="text-muted">¥68/箱 | 脆甜多汁</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">糖心认证</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('新疆冰糖心苹果', 68, 'https://img2.baidu.com/it/u=790355989,2287549195&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品5：桃子 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img0.baidu.com/it/u=1460341864,326279131&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
						 class="rounded w-100 h-100 object-fit-cover" alt="桃子">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">阳山水蜜桃</h4>
					<p class="text-muted">¥88/盒 | 爆汁香甜</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">现摘现发</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('阳山水蜜桃', 88, 'https://img0.baidu.com/it/u=1460341864,326279131&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品6：桑葚 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img1.baidu.com/it/u=1080410227,3494014583&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=790"
						 class="rounded w-100 h-100 object-fit-cover" alt="桑葚">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">云南黑桑葚</h4>
					<p class="text-muted">¥58/盒 | 花青素丰富</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">限时特惠</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('云南黑桑葚', 58, 'https://img1.baidu.com/it/u=1080410227,3494014583&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=790')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品7：猕猴桃 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img0.baidu.com/it/u=94800147,3884747324&fm=253&fmt=auto?w=418&h=529"
						 class="rounded w-100 h-100 object-fit-cover" alt="猕猴桃">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">新西兰奇异果</h4>
					<p class="text-muted">¥108/盒 | 黄金果肉</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">VC之王</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('新西兰奇异果', 108, 'https://img0.baidu.com/it/u=94800147,3884747324&fm=253&fmt=auto?w=418&h=529')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品8：千禧果 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img1.baidu.com/it/u=728926381,1041039515&fm=253&fmt=auto&app=138&f=JPEG?w=519&h=500"
						 class="rounded w-100 h-100 object-fit-cover" alt="千禧果">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">海南千禧小番茄</h4>
					<p class="text-muted">¥38/盒 | 爆浆口感</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">低卡零食</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('海南千禧小番茄', 38, 'https://img1.baidu.com/it/u=728926381,1041039515&fm=253&fmt=auto&app=138&f=JPEG?w=519&h=500')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品9：樱桃 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img2.baidu.com/it/u=3899842835,1668662318&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069"
						 class="rounded w-100 h-100 object-fit-cover" alt="樱桃">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">大连美早樱桃</h4>
					<p class="text-muted">¥198/盒 | JJJ级大果</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">当季新鲜</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('大连美早樱桃', 198, 'https://img2.baidu.com/it/u=3899842835,1668662318&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品10：橘子 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img2.baidu.com/it/u=3066517930,3304076301&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
						 class="rounded w-100 h-100 object-fit-cover" alt="橘子">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">四川爱媛橙</h4>
					<p class="text-muted">¥78/箱 | 果冻口感</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">皮薄无核</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('四川爱媛橙', 78, 'https://img2.baidu.com/it/u=3066517930,3304076301&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品11：西瓜 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img1.baidu.com/it/u=3720388243,131183391&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"
						 class="rounded w-100 h-100 object-fit-cover" alt="西瓜">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">尼察西瓜</h4>
					<p class="text-muted">¥200/箱 | 皮薄汁甜</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">解暑小能手</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('尼察西瓜', 200, 'https://img1.baidu.com/it/u=3720388243,131183391&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品12：椰子 -->
		<div class="col-md-4">
			<div class="product-card p-3 rounded shadow-sm h-100">
				<div class="image-container" style="height: 250px; overflow: hidden;">
					<img src="https://img1.baidu.com/it/u=2701266599,369569765&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500"
						 class="rounded w-100 h-100 object-fit-cover" alt="椰子">
				</div>
				<div class="p-3">
					<h4 class="fs-4 text-primary">尼察椰子</h4>
					<p class="text-muted">¥220/个 | 椰香浓郁</p>
					<div class="d-flex justify-content-between">
						<small class="text-danger fs-6">清热解渴</small>
						<button class="btn btn-sm btn-outline-light" onclick="addToCart('尼察椰子', 220, 'https://img1.baidu.com/it/u=2701266599,369569765&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500')">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</section>

<!-- 购物车区域 -->
<section id="shopping-cart-section" class="container my-5 py-5">
	<div class="hero p-5">
		<h2 class="text-center mb-5">购物车</h2>
		<div id="cart-items-container">
			<div class="cart-empty">
				<p>您的购物车目前是空的</p>
				<a href="#" class="btn btn-primary">继续购物</a>
			</div>
		</div>
		<div id="cart-summary" class="mt-4" style="display: none;">
			<div class="d-flex justify-content-between">
				<h5>总计：</h5>
				<h5 id="cart-total">¥0</h5>
			</div>
			<button class="btn btn-primary w-100 mt-3">去结算</button>
		</div>
	</div>
</section>

<!-- 会员中心区域 -->
<section id="member-center-section" class="container my-5 py-5">
	<div class="hero p-5">
		<h2 class="text-center mb-5">会员中心</h2>
		<div class="text-center">
			<p>请登录查看会员信息</p>
			<a href="#" class="btn btn-primary">立即登录</a>
		</div>
	</div>
</section>

<style>
	/* 确保图片填充方式一致 */
    .object-fit-cover {
        object-fit: cover;
    }
    /* 卡片高度统一 */
    .product-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    /* 图片容器保持比例 */
    .image-container {
        flex-shrink: 0;
    }
    /* 内容区域自动填充剩余空间 */
    .product-card > div:last-child {
        flex-grow: 1;
    }
    /* 购物车商品项样式 */
    .cart-item {
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .cart-item-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
    }
    .cart-empty {
        text-align: center;
        padding: 40px 0;
    }
    .quantity-control {
        display: flex;
        align-items: center;
    }
    .quantity-btn {
        width: 30px;
        height: 30px;
        border: 1px solid #ddd;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .quantity-input {
        width: 50px;
        text-align: center;
        margin: 0 5px;
    }
</style>

<!-- 页脚 -->
<footer class="bg-dark text-white py-5">
	<div class="container">
		<div class="row g-4">
			<div class="col-md-4">
				<h5>鲜果集</h5>
				<p>电话: 400-800-FRUIT | 服务时间: 7:00-23:00</p>
			</div>
			<div class="col-md-3">
				<h5>快速链接</h5>
				<ul class="list-unstyled">
					<li><a class="text-white" href="#">首页</a></li>
					<li><a class="text-white" href="#">产品分类</a></li>
					<li><a class="text-white" href="#">会员中心</a></li>
				</ul>
			</div>
			<div class="col-md-4">
				<h5>关注我们</h5>
				<div class="d-flex gap-3 fs-4">
					<a href="#"><i class="bi bi-weixin"></i></a>
					<a href="#"><i class="bi bi-weibo"></i></a>
					<a href="#"><i class="bi bi-tiktok"></i></a>
				</div>
			</div>
		</div>
		<hr>
		<div class="text-center">&#169; 2023 鲜果集科技有限公司 | 食品经营许可证：SPXXXXXXXXXX</div>
	</div>
</footer>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
	// 购物车数据
    let cartItems = [];

    // 添加商品到购物车
    function addToCart(name, price, image) {
        // 检查商品是否已在购物车中
        const existingItem = cartItems.find(item => item.name === name);

        if (existingItem) {
            // 如果已存在，增加数量
            existingItem.quantity += 1;
        } else {
            // 如果不存在，添加新商品
            cartItems.push({
                name: name,
                price: price,
                image: image,
                quantity: 1
            });
        }

        // 更新购物车显示
        updateCart();

        // 显示添加成功的提示
        alert(`${name} 已添加到购物车`);
    }

    // 更新购物车显示
    function updateCart() {
        const cartContainer = document.getElementById('cart-items-container');
        const cartCount = document.getElementById('cart-count');
        const cartTotal = document.getElementById('cart-total');
        const cartSummary = document.getElementById('cart-summary');

        if (cartItems.length === 0) {
            // 购物车为空
            cartContainer.innerHTML = `
                <div class="cart-empty">
                    <p>您的购物车目前是空的</p>
                    <a href="#" class="btn btn-primary">继续购物</a>
                </div>
            `;
            cartCount.style.display = 'none';
            cartSummary.style.display = 'none';
        } else {
            // 购物车有商品
            let cartHTML = '';
            let total = 0;

            cartItems.forEach((item, index) => {
                total += item.price * item.quantity;

                cartHTML += `
                    <div class="cart-item">
                        <div class="row align-items-center">
                            <div class="col-md-2">
                                <img src="${item.image}" class="cart-item-img" alt="${item.name}">
                            </div>
                            <div class="col-md-4">
                                <h5>${item.name}</h5>
                                <p class="text-muted mb-0">¥${item.price}</p>
                            </div>
                            <div class="col-md-3">
                                <div class="quantity-control">
                                    <button class="quantity-btn" onclick="changeQuantity(${index}, -1)">-</button>
                                    <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                                    <button class="quantity-btn" onclick="changeQuantity(${index}, 1)">+</button>
                                </div>
                            </div>
                            <div class="col-md-2 text-end">
                                <h5>¥${item.price * item.quantity}</h5>
                            </div>
                            <div class="col-md-1 text-end">
                                <button class="btn btn-sm btn-danger" onclick="removeItem(${index})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });

            cartContainer.innerHTML = cartHTML;
            cartTotal.textContent = `¥${total}`;
            cartCount.textContent = cartItems.reduce((sum, item) => sum + item.quantity, 0);
            cartCount.style.display = 'block';
            cartSummary.style.display = 'block';
        }
    }

    // 修改商品数量
    function changeQuantity(index, change) {
        const newQuantity = cartItems[index].quantity + change;

        if (newQuantity < 1) {
            // 如果数量小于1，移除商品
            removeItem(index);
        } else {
            // 更新数量
            cartItems[index].quantity = newQuantity;
            updateCart();
        }
    }

    // 移除商品
    function removeItem(index) {
        cartItems.splice(index, 1);
        updateCart();
    }

    // 新用户优惠弹窗
    var freeShippingModal = new bootstrap.Modal(document.getElementById('freeShippingModal'));
    document.addEventListener('DOMContentLoaded', () => {
        freeShippingModal.show();
    });
</script>
</body>
</html>